// *******************************************************************************************************
// # 表
// *******************************************************************************************************

// 表
//
// #### export to common.css
// ※このページでは表示が完全に再現されず、部分的に崩れている場合があります。  
// ※class名やデザインの参考まで
//
// Styleguide 7.0

/* ------------------------------------
	* 表
* ------------------------------------ */


// 見出しが横並びの表
//
// .mod-tbl.mod_table_col - sample
//
// Markup:
// <table class="mod_table mod_table_col">
// <tr>
// <th scope="col" class="mod_check">選択</th>
// <th scope="col">部屋階</th>
// <th scope="col">間取り図</th>
// <th scope="col">賃料／管理費</th>
// <th scope="col">敷金／礼金</th>
// <th scope="col">間取り／面積</th>
// <th scope="col">キャンペーン<br />ほか</th>
// <th scope="col">検討リスト</th>
// </tr>
// <tr>
// <td rowspan="2" class="mod_check mod_check_green"><input type="checkbox" name="" id="" value="" /></td>
// <td>
// <p>1階</p></td>
// <td><a href="javascript: void(0);"><img src="/shared/images/dummy/img_madori.jpg" alt="間取り図" width="48" height="64" /></a></td>
// <td>
// <p><span class="price">10.5</span>万円</p>
// <p>4,000円</p></td>
// <td>
// <p>1ヶ月／</p>
// <p>10,000円</p></td>
// <td>
// <p>2LDK</p>
// <p>32.29m&sup2;</p></td>
// <td><a href="javascript: void(0);"><img src="/shared/images/dummy/icn_campaign.jpg" alt="" width="50" height="50" class="mod_icn_campaign" /></a></td>
// <td><a href="javascript: void(0);" class="mod_icn_star">お気に入りに追加</a></td>
// </tr>
// <tr class="tr_under">
// <td colspan="7">
// <ul class="mod_list_icn_equipment mod_list_icn_equipment4">
// <li><img src="/shared/images/icon/equipment/icn_bathtoilet.png" alt="バス・トイレ別" width="100" height="20" /></li>
// <li><img src="/shared/images/icon/equipment/icn_freerent.png" alt="フリーレント" width="100" height="20" /></li>
// </ul>
// <div class="box_btn">
// <a href="#dummy" class="mod_btn_all_s mod_btn_all_green">問い合わせ</a>
// <a href="#dummy" target="_blank" class="mod_btn_s mod_btn_blue">詳細</a>
// </div>
// </td>
// </tr>
// </table>
//
// Styleguide 7.1

// 物件リスト：写真満載（紫色）
//
// tr.flag_picture li.tag - class追加, 画像サイズ変更
//
// Markup:
// <table class="mod_table mod_table_col">
// <tr>
// <th scope="col" class="mod_check">選択</th>
// <th scope="col">部屋階</th>
// <th scope="col">間取り図</th>
// <th scope="col">賃料／管理費</th>
// <th scope="col">敷金／礼金</th>
// <th scope="col">間取り／面積</th>
// <th scope="col">キャンペーン<br />ほか</th>
// <th scope="col">検討リスト</th>
// </tr>
// <tr class="flag_picture">
// <td rowspan="2" class="mod_check mod_check_green"><input type="checkbox" name="" id="" value="" /></td>
// <td>
// <p>1階</p></td>
// <td><a href="javascript: void(0);"><img src="/shared/images/dummy/img_madori.jpg" alt="間取り図" width="48" height="64" /></a></td>
// <td>
// <p><span class="price">10.5</span>万円</p>
// <p>4,000円</p></td>
// <td>
// <p>1ヶ月／</p>
// <p>10,000円</p></td>
// <td>
// <p>2LDK</p>
// <p>32.29m&sup2;</p></td>
// <td><a href="javascript: void(0);"><img src="/shared/images/dummy/icn_campaign.jpg" alt="" width="50" height="50" class="mod_icn_campaign" /></a></td>
// <td><a href="javascript: void(0);" class="mod_icn_star">お気に入りに追加</a></td>
// </tr>
// <tr class="tr_under">
// <td colspan="7">
// <ul class="mod_list_icn_equipment mod_list_icn_equipment4">
// <li class="tag"><img src="/shared/images/icon/equipment/icn_picture.png" alt="写真満載" width="100" height="31" /></li>
// <li><img src="/shared/images/icon/equipment/icn_freerent.png" alt="フリーレント" width="100" height="20" /></li>
// </ul>
// <div class="box_btn">
// <a href="#dummy" class="mod_btn_all_s mod_btn_all_green">問い合わせ</a>
// <a href="#dummy" target="_blank" class="mod_btn_s mod_btn_blue">詳細</a>
// </div>
// </td>
// </tr>
// </table>
//
// Styleguide 7.2

// 物件リスト：仮フラグA（緑色）
//
// tr.flag_a li.tag - class追加, 画像サイズ変更
//
// Markup:
// <table class="mod_table mod_table_col">
// <tr>
// <th scope="col" class="mod_check">選択</th>
// <th scope="col">部屋階</th>
// <th scope="col">間取り図</th>
// <th scope="col">賃料／管理費</th>
// <th scope="col">敷金／礼金</th>
// <th scope="col">間取り／面積</th>
// <th scope="col">キャンペーン<br />ほか</th>
// <th scope="col">検討リスト</th>
// </tr>
// <tr class="flag_a">
// <td rowspan="2" class="mod_check mod_check_green"><input type="checkbox" name="" id="" value="" /></td>
// <td>
// <ul class="list_icn_room">
// <li>新築</li>
// <!-- /.list_icn_room --></ul>
// <p class="floor">1階</p></td>
// <td><a href="javascript: void(0);"><img src="/shared/images/dummy/img_madori.jpg" alt="間取り図" width="48" /></a></td>
// <td>
// <p><span class="price">10.5</span>万円</p>
// <p>4,000円</p></td>
// <td>
// <p>1ヶ月／</p>
// <p>10,000円</p></td>
// <td>
// <p>2LDK</p>
// <p>32.29m&sup2;</p></td>
// <td><a href="javascript: void(0);"><img src="/shared/images/dummy/icn_campaign.jpg" alt="" width="50" height="50" class="mod_icn_campaign" /></a></td>
// <td><a href="javascript: void(0);" class="mod_icn_star">お気に入りに追加</a></td>
// </tr>
// <tr class="tr_under">
// <td colspan="7">
// <ul class="mod_list_icn_equipment mod_list_icn_equipment4">
// <li class="tag"><img src="/shared/images/dummy/icn_flag_a.png" alt="" width="100" height="31" /></li>
// <li><img src="/shared/images/icon/equipment/icn_freerent.png" alt="フリーレント" width="100" height="20" /></li>
// <!-- /.mod_list_icn_equipment --></ul>
// <div class="box_btn">
// <a href="#dummy" class="mod_btn_all_s mod_btn_all_green">問い合わせ</a>
// <a href="/user/recent.html" target="_blank" class="mod_btn_s mod_btn_blue mod_btn_visited">詳細</a>
// <!-- /.box_btn --></div></td>
// </tr>
// </table>
//
// Styleguide 7.3

// 物件リスト：仮フラグB（黄色）
//
// tr.flag_b li.tag - class追加, 画像サイズ変更
//
// Markup:
// <table class="mod_table mod_table_col">
// <tr>
// <th scope="col" class="mod_check">選択</th>
// <th scope="col">部屋階</th>
// <th scope="col">間取り図</th>
// <th scope="col">賃料／管理費</th>
// <th scope="col">敷金／礼金</th>
// <th scope="col">間取り／面積</th>
// <th scope="col">キャンペーン<br />ほか</th>
// <th scope="col">検討リスト</th>
// </tr>
// <tr class="flag_b">
// <td rowspan="2" class="mod_check mod_check_green"><input type="checkbox" name="" id="" value="" /></td>
// <td>
// <p class="floor">1階</p></td>
// <td><a href="javascript: void(0);"><img src="/shared/images/dummy/img_madori.jpg" alt="間取り図" width="48" /></a></td>
// <td>
// <p><span class="price">10.5</span>万円</p>
// <p>4,000円</p></td>
// <td>
// <p>1ヶ月／</p>
// <p>10,000円</p></td>
// <td>
// <p>2LDK</p>
// <p>32.29m&sup2;</p></td>
// <td><a href="javascript: void(0);"><img src="/shared/images/dummy/icn_campaign.jpg" alt="" width="50" height="50" class="mod_icn_campaign" /></a></td>
// <td><a href="javascript: void(0);" class="mod_icn_star_active">お気に入りに追加</a></td>
// </tr>
// <tr class="tr_under">
// <td colspan="7">
// <ul class="mod_list_icn_equipment mod_list_icn_equipment4">
// <li class="tag"><img src="/shared/images/dummy/icn_flag_b.png" alt="" width="100" height="31" /></li>
// <li><img src="/shared/images/icon/equipment/icn_bathtoilet.png" alt="バス・トイレ別" width="100" height="20" /></li>
// <!-- /.mod_list_icn_equipment --></ul>
// <div class="box_btn">
// <a href="#dummy" class="mod_btn_all_s mod_btn_all_green">問い合わせ</a>
// <a href="/user/recent_none.html" target="_blank" class="mod_btn_s mod_btn_blue mod_btn_visited">詳細</a>
// <!-- /.box_btn --></div></td>
// </tr>
// </table>
//
// Styleguide 7.4

/* --------------------------
	* mod_table
* -------------------------- */
.mod_table {
	width: 100%;
	line-height: $lineHeight;
	background-color: #fff;

	th, td {
		vertical-align: middle;

		&.mod_check {
			width: 46px - 20;
			background-color: $bgColorUsuGreen !important;
		}
		&.mod_checked {
			background-color: $bgColorPinkChecked !important;
		}
	}

	th {
		border-bottom: 2px solid #fff;
		line-height: 1.3;
		background-color: #ede3c7;
	}

	td {
		padding: 10px 0;

		&.mod_check {
			padding-top: 30px;
			border-bottom: 2px solid $borderColorGray !important;
			vertical-align: top;
		}
	}

	.mod_icn_star, .mod_icn_star_active {
		margin: 0px auto;
	}

	.price {
		color: $textColorPink;
		font-size: 18px;
		font-weight: bold;
	}
}

/* --------------------------
	* mod_table_col
* -------------------------- */
.mod_table_col {
	margin-top: 24px;

	.tr_under {
		td {
			border-bottom: 2px solid $borderColorGray;
		}
	}

	.flag_picture {
		td {
			border-bottom: 1px solid $borderColorFlagPicture;
			background-color: $bgColorFlagPicture;
		}
	}
	.flag_a {
		td {
			border-bottom: 1px solid $borderColorFlagA;
			background-color: $bgColorFlagA;
		}
	}
	.flag_b {
		td {
			border-bottom: 1px solid $borderColorFlagB;
			background-color: $bgColorFlagB;
		}
	}

	th, td {
		text-align: center;
	}

	th {
		border-left: 2px solid #fff;
		height: 40px;
		font-size: 12px;

		&:first-child {
			border-left: none;
		}
	}

	td {
		padding: 10px;
	}

	.list_icn_room {
		color: $textColorPink;
		font-weight: bold;
	}
	
	.floor {
		font-size: 18px;
		font-weight: bold;
	}

	.mod_btn_all_green {
		padding-top: 8px;
		padding-bottom: 6px;
		width: 98px;
		font-size: $fontSize;
	}

	.mod_btn_blue {
		width: 92px;
	}

	.mod_list_icn_equipment {
		float: left;
	}

	.box_btn {
		float: right;

		@include hack(6) {
			float: none;
			overflow: hidden;
		}
		@include hack(7) {
			float: none;
			overflow: hidden;
		}
	}
}

